// 获取DOM元素
const frame = document.querySelector('.frame');
const maxButton = document.querySelector('.dot:nth-child(3)');

// 全屏切换功能 - 模拟mac全屏窗口
let isFullscreen = false;

function toggleFullscreen() {
  if (!isFullscreen) {
    // 进入全屏
    // 使用requestAnimationFrame确保动画平滑
    requestAnimationFrame(() => {
      frame.style.transition = 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)';
      frame.style.transform = 'scale(0.95)';
    
      // 延迟添加全屏类以触发平滑过渡
      setTimeout(() => {
        requestAnimationFrame(() => {
          frame.classList.add('fullscreen');
          frame.style.transform = 'scale(1)';
        });
      }, 50);
    });
  } else {
    // 退出全屏
    requestAnimationFrame(() => {
      frame.style.transition = 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)';
      frame.style.transform = 'scale(0.95)';
    
      // 动画结束后移除类
      setTimeout(() => {
        requestAnimationFrame(() => {
          frame.classList.remove('fullscreen');
          frame.style.transition = '';
          frame.style.transform = '';
        });
      }, 400);
    });
  }
  isFullscreen = !isFullscreen;
}

// 添加全屏按钮点击事件
if (maxButton) {
  maxButton.addEventListener('click', toggleFullscreen);
}

// 处理ESC键退出全屏
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && isFullscreen) {
    toggleFullscreen();
  }
});

// 为最小化和关闭按钮添加mac风格的动画效果
const closeButton = document.querySelector('.dot:nth-child(1)');
const minButton = document.querySelector('.dot:nth-child(2)');

if (minButton) {
  minButton.addEventListener('click', () => {
    frame.style.transition = 'transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)';
    frame.style.transform = 'scale(0.9) translateY(20px)';
    frame.style.opacity = '0.7';
    setTimeout(() => {
      frame.style.transform = 'scale(1) translateY(0)';
      frame.style.opacity = '1';
      frame.style.transition = '';
    }, 300);
  });
}

if (closeButton) {
  closeButton.addEventListener('click', () => {
    frame.style.opacity = '0';
    frame.style.transform = 'scale(0.9) translateY(20px)';
    setTimeout(() => {
      frame.style.opacity = '1';
      frame.style.transform = 'scale(1) translateY(0)';
    }, 300);
  });
}

// 为卡片添加悬停效果
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    card.style.transform = 'translateY(-5px)';
    card.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.3)';
    card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
  });
  
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'translateY(0)';
    card.style.boxShadow = 'none';
  });
});

// 平滑滚动
function smoothScroll(target) {
  target.scrollIntoView({ behavior: 'smooth' });
}

// 添加平滑滚动的链接事件
const smoothLinks = document.querySelectorAll('a[href^="#"]');
smoothLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      smoothScroll(targetElement);
    }
  });
});

// 页面加载动画
window.addEventListener('DOMContentLoaded', () => {
  frame.style.opacity = '0';
  frame.style.transform = 'translateY(20px)';
  
  setTimeout(() => {
    frame.style.opacity = '1';
    frame.style.transform = 'translateY(0)';
    frame.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
  }, 100);
});

// 代码高亮支持
function highlightSyntax() {
  const codeBlocks = document.querySelectorAll('pre code');
  codeBlocks.forEach(block => {
    // 简单的语法高亮逻辑
    let content = block.textContent;
    
    // 高亮关键字
    content = content.replace(/\b(const|let|var|function|return|if|else|for|while|switch|case|break|default|true|false|null|undefined)\b/g, '<span class="kw">$1</span>');
    
    // 高亮字符串
    content = content.replace(/"([^"\\]|\\.)*"/g, '<span class="str">$&</span>');
    content = content.replace(/'([^'\\]|\\.)*'/g, '<span class="str">$&</span>');
    
    // 高亮数字
    content = content.replace(/\b\d+(\.\d+)?\b/g, '<span class="num">$&</span>');
    
    // 高亮注释
    content = content.replace(/\/\/.*$/gm, '<span class="cmt">$&</span>');
    
    // 高亮函数名
    content = content.replace(/\b([a-zA-Z_$][a-zA-Z0-9_$]*)(?=\()/g, '<span class="fn">$1</span>');
    
    block.innerHTML = content;
  });
}

// 初始化语法高亮
highlightSyntax();